import { DatePicker, Form, Select } from "antd";
import dayjs from "dayjs";
import React, { useEffect, useState } from "react";

export default function EditDatePicker({
    value,
    defaultValue,
    editing = false,
    dataIndex,
    title,
    inputRef,
    save,
    toggleEdit,
    children,

}) {
    const [showValue, setShowValue] = useState(dayjs(defaultValue).format("YYYY-MM-DD"));
    useEffect(() => {
        setShowValue(dayjs(defaultValue).format("YYYY-MM-DD"));
    }, [children, defaultValue, value])



    return (
        <>
            {
                editing ? <Form.Item
                    style={{
                        margin: 0,
                        
                    }}
                    name={dataIndex}
                    rules={[
                        {
                            required: true,
                            message: ``,
                        },
                    ]}
                // initialValue={defaultValue}
                >

                    <DatePicker
                        ref={inputRef}
                        onBlur={save}
                        style={{
                            width: "100%"
                        }}
                    />
                </Form.Item>
                    :
                    <div
                        className="editable-cell-value-wrap"
                        onClick={toggleEdit}
                    >
                        {showValue}
                    </div>
            }

        </>
    )
}